<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>other person center</title>
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" href="../static/css/otherPerson.css" th:href="@{/css/otherPerson.css}">
    <link rel="stylesheet" href="../static/css/personCenter.css" th:href="@{/css/personCenter.css}">
    <link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
    <link rel="stylesheet" href="../static/css/mainPage.css" th:href="@{/css/mainPage.css}">
    <link rel="stylesheet" href="../static/css/confirm.css" th:href="@{/css/confirm.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="Box">
    <div><div style="height: 7.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav"></div>
        <div class="Box">
            <div class="blockA">
                <div class="part-a">
                    <div class="landscript">
                        <div class="imgcontents">
                            <div id="imgs">
                                <img  src="https://haven-file.oss-cn-beijing.aliyuncs.com/11-600x400.jpg" id="uimgs" class="img"  alt=""/>
                            </div>
                        </div>
                    </div>
                    <div class="address"  > <i class="iconfont">&#xe606;</i>&nbsp;IP属地<span th:text="${user.location}"></span></div></div>
                <div class="part-b" >
                    <div class="name" th:text="${user.username}"></div>
                    <a  class="zl" th:data-user-id="${user.id}">查看详细资料</a>
                    <div class="modal" id="detailModal" style="display: none">
                        <span class="close" id="closeBtn">&times;</span>
                        <div class="modal-content">
                            <h2>详细信息</h2>
                            <p>性别:<span id="userGender" th:text="${user.username}"></span></p>
                            <p>居住地：<span  id="userLocation" th:text="${user.location}"></span></p>
                            <p>职业：<span  id="userIndustry" th:text="${user.industry}"></span></p>
                            <p>一句话介绍：<span  id="userBio" th:text="${user.bio}"></span></p>
                        </div>
                    </div>
                    <a class="back cursor-pointer" href="http://localhost:8080/mainPageRecommend" style="z-index: 95"><i class="iconfont" >&#xe60b;</i>返回首页</a>
                    <div class="author-actions">
                        <button class="unfollows otherfollower" id="otherfollowers" th:value="${user.id}" style="margin-top: 74px; border: none;margin-right: 30px;">已关注</button>
                    </div>
                </div>
                <div class="part-c" style="z-index: 95;">
                    <div class="imgcontent">
                        <img src="../static/img/image1.png" id="uimg" class="img" width="170px" height="170px"  th:src="${user.avatar}"/>
                    </div></div>
            </div>
            <div class="blockB">
                <div class="tap">
                    <ul>
                        <li><a href="/userHomepage" class="tap-a" th:href="@{/otherCenter(id=${user.id})}">文章&nbsp;&nbsp;</a></li>
                        <li><a href="/userHomepage/views" class="tap-a" th:href="@{/otherCenterIdea(id=${user.id})}" >想法&nbsp;&nbsp;  </a></li>
                        <li class="active"> <a href="/userHomepage/follower" class="tap-a" th:href="@{/otherCenterFollower(id=${user.id})}" >关注订阅&nbsp; </a></li></ul>
                </div>
                <div class="attention" style="display: block;">
                    <div class="mydongtai">
                        <div class="tab-container">
                            <div class="tab-header">
                                <span class="tab-item active"><a href="/userHomepage/follower" class="tap-a" th:href="@{/otherCenterFollower(id=${user.id})}" >他关注的人 </a></span>
                                <span class="tab-item"><a href="/userHomepage/fans" class="tap-a" th:href="@{/otherCenterFans(id=${user.id})}" >关注他的人</a></span>
                            </div></div>
                    </div>
                    <div class="tab-content">
                        <div class="contents-item active" >
                            <div style="display: block;"  th:each="follower,followerStat: ${follower}">
                                <a href="http://localhost:8080/userProfile"  th:href="@{/userProfile(id=${follower.id})}">
                                    <div class="answer-header" >
                                        <img src="../static/img/image2.png" th:src="${follower.avatar}" alt="用户头像" class="avatar">
                                        <div class="user-infos">
                                            <span class="user-name" th:text="${follower.username}"></span>
                                            <p class="user-motto" th:text="${follower.bio}"></p>
                                        </div>
                                    </div></a>
                                    <span id="follow" class="unfollows" th:attr="data-user-id=${follower.id}">已关注</span>
                                    <div  class="user-icons"><span th:text="${follower.followerCount}"></span>关注者</div>
                                </div>
                        </div>
                    </div></div></div>
            <div class="blockC" >
                <a class="guanzhu" href="/userHomepage/follower"  th:href="@{/userHomepage/follower}">关注了</a>
                <div class="num1" th:text="${followersNum}">1</div>
            </div>
            <div class="blockD" >
                <a class="b-guanzhu" href="/userHomepage/fans"  th:href="@{/userHomepage/fans}">关注者</a>
                <div class="num2" th:text="${fansNum}">0</div>
            </div>
            <div class="blockE">
                <div class="tap2">
                    <ul><li ><a class="guazhu" href="">发布的文章</a><a class="count"  href="" th:text="${postsNum}">0</a></li>
                        <li><a class="guazhu" href="">发布的视频</a><a class="count" href="" th:text="${videosNum}">0</a></li>
                        <li><a class="guazhu" href="">发布的想法</a><a class="count" href="" th:text="${ThoughtsNum}">0</a></li>
                    </ul></div>
                <div class="look">点赞了<span th:text="${likesNum}"></span>篇文章</div>
                <div class="help">
                    <ul>
                        <li> <i class="iconfont">&#xe72c;</i>&nbsp;帮助中心<p><a href="Contact.html" th:href="@{/Contact}">联系我们</a><a href="protect.html" th:href="@{/protect}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私保护</a></p></li>
                        <li> <i class="iconfont">&#xe651;</i>&nbsp;举报中心<p><a href="RumorReport.html" th:href="@{/RumorReport}">网络谣言举报</a><a href="InfringementReport.html" th:href="@{/InfringementReport}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;侵权举报</a></p></li>
                    </ul></div>
            </div>
            <div class="blockF">
                <img class="creat-img" src="../static/img/image2.png" th:src="@{/img/image2.png}" alt="" width="72px" height="50px">
                <div class="c-center">创作中心</div>
                <div class="text"><p class="text1">开启你的慧问创作之旅</p><p class="text2">发布首篇内容，开通创作中心</br>快来成为慧问的作者吧～</p>
                    <img class="c-logo" src="../static/img/logo.png" th:src="@{/img/logo.png}" alt="A cute picture" width="80px" height="90px"></div>
                <a class="creat" href="creatorCenterAccount.html" th:href="@{/creativeCenter}"> <i class="iconfont">&#xe727;</i>&nbsp;开始创作</a>
            </div>
        </div></div>
</div>
</body>
<script th:inline="javascript">

    let isFollowing =[[${isMyFollowing}]] ;
    let follow_button = document.querySelector('.unfollows');
    if(isFollowing){
        follow_button.classList.add('follows');
        follow_button.classList.remove('unfollows');
        follow_button.textContent = '+关注他';
    }else{
        follow_button.classList.remove('follows');
        follow_button.classList.add('unfollows');
        follow_button.textContent = '已关注';
    }

console.log(isFollowing)
</script>
<script src="../static/js/otherPerson.js" th:src="@{/js/otherPerson.js}"></script>
</html>